<script setup lang="ts">
import { ref, onMounted } from "vue";
import { VectorAPI } from "@/api/knowledge";
import type { QueryResult } from "@/api/knowledge";
import { ElMessage } from "element-plus";

// 查询参数
const queryParams = ref({
  current: 1,
  size: 10,
  fileName: "",
});

// 表格数据
const dataList = ref<QueryResult[]>([]);
const total = ref(0);
const loading = ref(false);

// 文件上传相关
const uploadLoading = ref(false);
const fileList = ref([]);

// 获取数据列表
const getList = async () => {
  loading.value = true;
  try {
    const { current, size, fileName } = queryParams.value;
    const result = await VectorAPI.getPage(current, size, fileName);
    dataList.value = result.list;
    total.value = result.total;
  } catch (error) {
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 处理查询
const handleQuery = () => {
  queryParams.value.current = 1;
  getList();
};

// 处理重置
const handleReset = () => {
  queryParams.value.fileName = "";
  handleQuery();
};

// 处理文件上传
const handleFileSelect = (event: Event) => {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    handleUpload(input.files[0]);
  }
};

const handleUpload = async (file: File) => {
  uploadLoading.value = true;
  try {
    const result = await VectorAPI.uploadFile(file);
    if (result) {
      ElMessage.success("上传成功");
      handleQuery();
    } else {
      ElMessage.error(result || "上传失败");
    }
  } catch (error) {
    ElMessage.error("上传失败");
  } finally {
    uploadLoading.value = false;
  }
};

// 处理分页变化
const handleSizeChange = (val: number) => {
  queryParams.value.size = val;
  getList();
};

const handleCurrentChange = (val: number) => {
  queryParams.value.current = val;
  getList();
};

// 初始化
onMounted(() => {
  getList();
});
</script>

<template>
  <div class="app-container">
    <!-- 搜索工具栏 -->
    <el-card class="search-wrapper">
      <el-form :inline="true">
        <el-form-item label="文件名称">
          <el-input
            v-model="queryParams.fileName"
            placeholder="请输入文件名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作工具栏 -->
    <el-card class="table-wrapper">
      <template #header>
        <el-button
          v-hasPerm="['knowledge:vector:import']"
          type="success"
          @click="importQuestion()"
          :loading="uploadLoading"
        >
          <i-ep-UploadFilled />
          导入
        </el-button>
        <input
          type="file"
          ref="fileInput"
          style="display: none"
          accept=".txt,.doc,.docx,.pdf"
          @change="handleFileSelect"
        />
        <el-button
          type="primary"
          :loading="uploadLoading"
          @click="$refs.fileInput.click()"
        >
          <el-icon><Upload /></el-icon>
          上传文件
        </el-button>
      </template>

      <!-- 表格 -->
      <el-table v-loading="loading" :data="dataList" border style="width: 100%">
        <el-table-column prop="entity.file_name" label="文件名称" />
        <el-table-column
          prop="entity.text"
          label="文本内容"
          show-overflow-tooltip
        />
        <!-- <el-table-column prop="createTime" label="创建时间" width="180" /> -->
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.current"
          v-model:page-size="queryParams.size"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 10px;
}

.table-wrapper {
  :deep(.el-card__header) {
    padding: 10px 20px;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
